<template>
    <div class="goodsinfo-container">

        <!-- 购物车小球 -->
        <!-- 钩子函数 -->
        <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
            <div class="ball" v-show="ballFull" ref="ball"></div>
        </transition>    


        <!-- 轮播图 -->
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <!--  :lunbotu="lunbotu" 父组件向子组件传值-->
                    <swiper :lunbotu="lunbotu" :isFull="false"></swiper>
                </div>
            </div>
        </div>

        <!-- 购物详情 -->
        <div class="mui-card">
            <div class="mui-card-header">{{ goodsInfo.title }}</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p>市场价：<del>￥{{ goodsInfo.market_price }}</del>&nbsp;&nbsp;销售价：￥<span class="now_price">{{ goodsInfo.sell_price }}</span></p>
                    <p>购买数量：<number @getcount="getSelectedCount" :max="goodsInfo.stock_quantity"></number></p>
                    <p>
                        <mt-button type="primary" size="small">立即购买</mt-button>
                        <mt-button type="danger" size="small" @click="addShopCar">加入购物车</mt-button>
                    </p>
                </div>
            </div>
        </div>

        <!-- 商品参数 -->
        <div class="mui-card">
            <div class="mui-card-header">商品参数</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p>商品货号：{{ goodsInfo.goods_no }}</p>
                    <p>库存情况：{{ goodsInfo.stock_quantity }}件</p>
                    <p>上架时间：{{ goodsInfo.add_time | dateFormat }}</p>                    

                </div>
            </div>
            <div class="mui-card-footer">
                <mt-button type="primary" size="large" plain @click="goDesc(goodsId)">图文介绍</mt-button>
                <mt-button type="danger" size="large" plain @click="goComment(goodsId)">商品评论</mt-button>
            </div>
        </div>

        
    </div>
</template>
<script>
import swiper from '../subComponent/swiper.vue';
import number from '../subComponent/number.vue';

export default {
    data() {
        return {
            goodsId: this.$route.params.id,  //将地址栏的id获取过来放在data中，方面以后使用
            lunbotu: [],   //轮播图
            goodsInfo: {},  //价格区域数据
            ballFull: false,  //控制小球状态
            selectedGoodsCount: 1  //选中商品数量
        }
    },
    created() {
        this.getLunboTu();
        this.getGoodsInfo();
    },
    methods: {
        getLunboTu() {
            this.$http.get("api/getthumimages/"+ this.goodsId).then(result=> {
                if(result.body.status === 0) {
                    
                    //获取过来的是src ，要变成img
                    result.body.message.forEach(item=>{
                        item.img = item.src;
                    })

                    this.lunbotu = result.body.message;
                }
            })
        },
        getGoodsInfo() {
            this.$http.get("api/goods/getinfo/" + this.goodsId).then(result=> {
                if(result.body.status === 0) {
                    // console.log(result.body.message[0])
                    this.goodsInfo = result.body.message[0];
                }
            })
        },
        goDesc(id) {
            //跳转到desc组件
            this.$router.push({ name: "desc" , params: id });
        },
        goComment(id) {
            //跳转到comment组件
            this.$router.push({ name: "comment" , params: id });   
        },
        beforeEnter(el) {
            el.style.transform = "translate(0,0)";
        },
        enter(el,done) {
            el.offsetWidth;
            //获取小球的位置
            const ballPosition = this.$refs.ball.getBoundingClientRect();
            //获取右下角徽标位置
            const badgePosition = document.getElementById("badge").getBoundingClientRect();

            //获取小球横向位移距离
            const xDist = badgePosition.left - ballPosition.left;
            const yDist = badgePosition.top - ballPosition.top;
            
            el.style.transform = `translate(${xDist}px , ${yDist}px)`;
            el.style.transition = "all 0.5s cubic-bezier(.4,-0.3,1,.68)";

            done();
        },
        afterEnter(el) {
            this.ballFull = !this.ballFull;
        },
        addShopCar() {
            //加入购物车的方法
            this.ballFull = !this.ballFull;
        },
        getSelectedCount(count) {
            //接收子组件传递过来的值  count 为子组件传递过来的数据
            //console.log(count);
            //将拿到的数据放到data中
            this.selectedGoodsCount = count;
        }
    },
    components: {
        swiper,
        number
    }
}

</script>
<style lang="scss" scoped>
.goodsinfo-container {
  background-color: #eee;
  overflow: hidden;
}

.now_price {
  color: red;
  font-weight: bold;
}

.mui-card-footer {
  display: block;

  button {
    margin: 15px 0;
  }
}
.ball {
  width: 15px;
  height: 15px;
  background-color: red;
  border-radius: 50%;
  position: absolute;
  z-index: 99;
  left: 150px;
  top: 390px;
}
</style>
